<%- include('../../layouts/base/header', { title: title || '系统安装配置', hideNav: true }) %>

<div class="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-4xl w-full space-y-8">

        <%- include('../../components/alert', { type: 'error', message: error }) %>
        <%- include('../../components/alert', { type: 'success', message: success }) %>

        <div>
            <div class="mx-auto h-16 w-16 bg-indigo-100 rounded-full flex items-center justify-center">
                <i class="fas fa-cog text-indigo-600 text-2xl"></i>
            </div>
            <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
                系统安装配置
            </h2>
            <p class="mt-2 text-center text-sm text-gray-600">
                请填写以下信息来完成系统安装
            </p>
        </div>

        <form class="mt-8 space-y-6" method="POST" action="/setup">
            <div class="space-y-6">
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
                    <!-- 站点名称 -->
                    <div class="space-y-2">
                        <label class="block text-sm font-medium text-gray-700">
                            <i class="fas fa-globe mr-2 text-indigo-500"></i>
                            站点名称
                        </label>
                        <%- include('../../components/input', { name: 'site_name', placeholder: '输入您的站点名称', value: 'InfoSphere', required: true }) %>
                    </div>
                </div>

                <!-- 站点描述 -->
                <div class="space-y-2">
                    <label class="block text-sm font-medium text-gray-700">
                        <i class="fas fa-info-circle mr-2 text-indigo-500"></i>
                        站点描述
                    </label>
                    <%- include('../../components/textarea', { name: 'site_description', placeholder: '简要描述您的站点', value: 'InfoSphere 是一款面向企业和个人的开源知识管理系统，旨在提供简单而强大的知识管理解决方案。', required: true }) %>
                </div>

                <!-- 数据库配置 -->
                <div class="border-t border-gray-200 pt-6">
                    <h3 class="text-lg font-medium text-gray-900 mb-4">
                        <i class="fas fa-database mr-2 text-green-500"></i>
                        数据库配置
                    </h3>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
                        <div class="space-y-2">
                            <label class="block text-sm font-medium text-gray-700">
                                数据库地址
                            </label>
                            <%- include('../../components/input', { name: 'DB_HOST', placeholder: 'localhost', value: 'localhost', required: true }) %>
                        </div>

                        <div class="space-y-2">
                            <label class="block text-sm font-medium text-gray-700">
                                数据库端口
                            </label>
                            <%- include('../../components/input', { type: 'number', name: 'DB_PORT', placeholder: '3306', value: '3306', required: true }) %>
                        </div>

                        <div class="space-y-2">
                            <label class="block text-sm font-medium text-gray-700">
                                数据库名称
                            </label>
                            <%- include('../../components/input', { name: 'DB_NAME', placeholder: '数据库名称，默认为 infosphere', value: '', required: true }) %>
                        </div>

                        <div class="space-y-2">
                            <label class="block text-sm font-medium text-gray-700">
                                用户名
                            </label>
                            <%- include('../../components/input', { name: 'DB_USER', placeholder: '数据库用户名', value: '', required: true }) %>
                        </div>

                        <div class="space-y-2">
                            <label class="block text-sm font-medium text-gray-700">
                                密码
                            </label>
                            <%- include('../../components/input', { type: 'password', name: 'DB_PASSWORD', placeholder: '数据库密码', value: '', required: false }) %>
                        </div>
                    </div>
                </div>

                <!-- 管理员账户 -->
                <div class="border-t border-gray-200 pt-6">
                    <h3 class="text-lg font-medium text-gray-900 mb-4">
                        <i class="fas fa-user-shield mr-2 text-red-500"></i>
                        管理员账户
                    </h3>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
                        <div class="space-y-2">
                            <label class="block text-sm font-medium text-gray-700">
                                管理员用户名
                            </label>
                            <%- include('../../components/input', { name: 'admin_username', placeholder: '管理员用户名', value: 'admin', required: true }) %>
                        </div>

                        <div class="space-y-2">
                            <label class="block text-sm font-medium text-gray-700">
                                管理员邮箱
                            </label>
                            <%- include('../../components/input', { type: 'email', name: 'admin_email', placeholder: 'admin@example.com', value: '', required: true }) %>
                        </div>

                        <div class="space-y-2">
                            <label class="block text-sm font-medium text-gray-700">
                                管理员密码
                            </label>
                            <%- include('../../components/input', { type: 'password', name: 'admin_password', placeholder: '设置管理员密码', value: '', required: true }) %>
                        </div>

                        <div class="space-y-2">
                            <label class="block text-sm font-medium text-gray-700">
                                确认密码
                            </label>
                            <%- include('../../components/input', { type: 'password', name: 'admin_password_confirm', placeholder: '再次输入密码', value: '', required: true }) %>
                        </div>
                    </div>
                </div>

                <!-- 系统配置 -->
                <div class="border-t border-gray-200 pt-6">
                    <h3 class="text-lg font-medium text-gray-900 mb-4">
                        <i class="fas fa-cogs mr-2 text-purple-500"></i>
                        系统配置
                    </h3>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
                        <div class="space-y-2">
                            <label class="block text-sm font-medium text-gray-700">
                                应用密钥
                            </label>
                            <%- include('../../components/input', { name: 'APP_SECRET', placeholder: '系统会自动生成', value: secret, readonly: true }) %>

                            <p class="mt-1 text-sm text-gray-500 space-x-2">
                                <i class="fas fa-info-circle"></i>
                                <span>用于加密会话和令牌，系统会自动生成随机密钥</span>
                            </p>
                        </div>

                        <div class="space-y-2">
                            <label class="block text-sm font-medium text-gray-700">
                                时区设置
                            </label>
                            <%- include('../../components/select', { name: 'TIMEZONE', value: 'Asia/Shanghai', required: true, options: [ { value: 'Asia/Shanghai', label: '中国标准时间 (UTC+8)' }, { value: 'UTC', label: '世界标准时间 (UTC+0)' }, { value: 'America/New_York', label: '美国东部时间' }, { value: 'Europe/London', label: '英国时间' }, { value: 'Asia/Tokyo', label: '日本时间' } ] }) %>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 提交按钮 -->
            <div class="pt-6">
                <%- include('../../components/button', { type: 'submit', text: '开始安装配置', className: 'w-full' }) %>
            </div>
        </form>
    </div>
</div>


<%- include('../../layouts/base/footer') %>